<script setup lang="ts">
import { EyeOutlined, FireOutlined, LikeOutlined } from "@ant-design/icons-vue";
import { computed, ref } from "vue";
import type { BlogVo } from "@/type";

// 标签相关文章
const tagArticles = ref<BlogVo[]>([
  {
    id: 1,
    title: "深入理解 Vue3 Composition API",
    excerpt:
      "详细解析 Vue3 组合式 API 的使用方法和最佳实践，帮助开发者更好地组织和复用组件逻辑。本文将从基础概念出发，通过实际案例讲解组合式 API 的优势和使用场景。",
    coverImage:
      "https://public.readdy.ai/ai/img_res/8a208e10a1b550441fa37889a58dbaf2.jpg",
    views: 2345,
    likes: 189,
    createdAt: "2025-03-30",
    tags: ["Vue", "Composition API", "前端开发"],
  },
]);
// 热门文章
const popularArticles = computed(() => {
  return [...tagArticles.value]
    .sort((a: any, b: any) => b.views - a.views)
    .slice(0, 5);
});
</script>

<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <h2 class="text-xl font-bold mb-6 flex items-center">
      <fire-outlined class="mr-2 text-red-500" />
      热门文章
    </h2>
    <div class="space-y-4">
      <div
        v-for="(article, index) in popularArticles"
        :key="article.id"
        class="flex items-start space-x-4 pb-4 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors duration-200"
      >
        <div
          class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold"
        >
          {{ index + 1 }}
        </div>
        <div class="flex-grow">
          <h3 class="font-medium line-clamp-2 mb-1">
            {{ article.title }}
          </h3>
          <div class="flex items-center text-xs text-gray-500">
            <eye-outlined class="mr-1" />
            <span>{{ article.views }}</span>
            <div class="mx-2 w-1 h-1 rounded-full bg-gray-300"></div>
            <like-outlined class="mr-1" />
            <span>{{ article.likes }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
